<div class="easyui-layout" data-options="fit:true" >

    <div data-options="region:'north'" style="height:50px;border:0;padding:5px">
        <table style="padding:0">
            <tr>
                <td style="width:590px;overflow:auto;float:left"><h3>一级字典</h3></td>
                <td style="width:590px;overflow:auto;float:left"><h3>二级字典</h3></td>
            </tr>
        </table>
    </div>

    <!--    字典信息-->
    <div data-options="region:'center'" style="border:0;padding:5px;overflow:hidden;">

        <!--        字典列表-->
        <div style="width:590px;height:98%;overflow:auto;border:1px solid #ccc;float:left">
            <table id="accDict_dict_grid1"></table>
        </div>

        <!--        字典信息-->
        <div style="width:590px;height:98%;overflow:auto;border:1px solid #ccc;float:left">
            <table id="accDict_dict_grid2"></table>
        </div>
    </div>
</div>

<script>
    $(function(){
        initSysDictGrid1();
        initSysDictGrid2(1);
    });

    function initSysDictGrid1() {
        $('#accDict_dict_grid1').datagrid({
            url: '/querySysDict',
            queryParams: {
                dict_id: null,
                father_id: 0
            },
            idField: 'id',
            // fitColumns: true,
            fit: true,
            scrollbarSize: 1,
            striped: true,
            checkOnSelect: false,
            selectOnCheck: false,
            singleSelect: true,
            pagination: true,
            pageSize: 15,
            pageList : [15, 30, 60 ],
            columns: [
                [
                    {field: 'id', title: '编码', width: 50, align: 'center', halign: 'center'},
                    {field: 'name', title: '名称', width: 150, align: 'center', halign: 'center'},
                    {field: 'keyname', title: '关键字', width: 150, align: 'center', halign: 'center'},
                    {
                        field: 'status', title: '状态', width: 50, align: 'center', halign: 'center',
                        formatter: function (value, row, index) {
                            if (value === 1) {
                                return '可用';
                            } else if (value === 0) {
                                return '不可用';
                            } else {
                                return '';
                            }
                        }
                    },
                    {field: 'ctime', title: '创建时间', width: 180, align: 'center', halign: 'center'}
                ]
            ],
            loadFilter: function (data) {
                if (data.data) return data.data;
                else return data;
            },
            onLoadSuccess: function (node, data) {
                $('#accDict_dict_grid1').datagrid('selectRow', 0);
            },
            onClickRow: function (index, row) {
                $('#accDict_dict_grid2').datagrid('reload', {
                    dict_id: null,
                    father_id: row.id
                })
            }
        });
    }

    function initSysDictGrid2(father_id) {
        $('#accDict_dict_grid2').datagrid({
            url: '/querySysDict',
            queryParams: {
                dict_id: null,
                father_id: father_id
            },
            idField: 'id',
            // fitColumns: true,
            fit: true,
            scrollbarSize: 1,
            striped: true,
            checkOnSelect: false,
            selectOnCheck: false,
            singleSelect: true,
            pagination: true,
            pageSize: 15,
            pageList : [15, 30, 60 ],
            columns: [
                [
                    {field: 'id', title: '编码', width: 50, align: 'center', halign: 'center'},
                    {field: 'name', title: '名称', width: 150, align: 'center', halign: 'center'},
                    {field: 'keyname', title: '关键字', width: 150, align: 'center', halign: 'center'},
                    {
                        field: 'status', title: '状态', width: 50, align: 'center', halign: 'center',
                        formatter: function (value, row, index) {
                            if (value === 1) {
                                return '可用';
                            } else if (value === 0) {
                                return '不可用';
                            } else {
                                return '';
                            }
                        }
                    },
                    {field: 'ctime', title: '创建时间', width: 180, align: 'center', halign: 'center'}
                ]
            ],
            loadFilter: function (data) {
                if (data.data) return data.data;
                else return data;
            },
            onLoadSuccess: function (node, data) {},
            onClickRow: function (index, row) {}
        });
    }
</script>